<template>
  <div class="common-container">
    <!-- <div class="header">
      <div class="header_left">
      </div>
      <div class="header_right">
        <el-button size="medium" style="margin-left: 15px;" @click="onAdd">新增</el-button>
      </div>
    </div> -->
    <div class="content">
      <el-table
        :data="tableData"
        height="calc(100% - 0px)"
        class="table"
        :header-cell-style="headerStyle"
        row-key="regionCode"
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        ref="refreshTable"
        :default-expand-all="false"
      >
        <el-table-column
          align="left"
          prop="regionName"
          label="行政区域名称"
          min-width="120"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.regionName }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="regionCode"
          label="行政划分码"
          min-width="140"
        >
        </el-table-column>

        <el-table-column align="center" prop="id" label="ID" min-width="120">
        </el-table-column>

        <!-- <el-table-column
          align="center"
          prop="management"
          label="操作"
          min-width="60"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <i
                @click="onEdit(scope.row)"
                class="iconfont tianxie tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <i
                @click="onDel(scope.row)"
                class="iconfont shanchu tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <!-- <addRegion ref="refAddRegion" :fixedPjtInfo='fixedPjtInfo'></addRegion> -->
    <!-- <editRegion ref="refEditRegion" :editInfo="editInfo"></editRegion> -->
  </div>
</template>

<script>
// import addRegion from "./components/addRegion.vue";
// import editRegion from "./components/editRegion.vue";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqAnalysisRegionDel, reqRegion, reqRegionLevel } from "@/api/api";
import { reqBaiYunRegionPage } from "@/api/baiyunArea.js";
import { handleTree } from "@utils/trans-tree";

export default {
  name: "",
  components: {
    // addRegion,
    // editRegion,
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      loadingSearch: false, //查询按钮loading
      configKey: "",
      tableData: [],
      editInfo: {},
      fixedPjtInfo: {},
    };
  },
  mounted() {},
  computed: {},
  methods: {
    // 懒加载子节点数据
    load(tree, treeNode, resolve) {
      reqBaiYunRegionPage({
        parentId: tree.id,
      }).then((res) => {
        res.data.list.forEach((item) => {
          // 等于5没下级了
          if (item.regionLevel != 5) {
            item.hasChildren = true;
          }
        });
        resolve(res.data.list);
      });
    },
    // 固定父id新增
    onAdd(row) {
      this.fixedPjtInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refAddRegion.dialogVisible = true;
    },
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.Region();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.Region();
      this.loadingSearch = false;
    },
    // onEdit(item) {
    //     this.editInfo = JSON.parse(JSON.stringify(item)); //深拷贝
    //     this.$refs.refEditRegion.dialogVisible = true;
    // },
    // onDel(row) {
    //     this.$confirm("此操作将永久删除该行政单位, 是否继续?", "提示", {
    //         confirmButtonText: "确定",
    //         cancelButtonText: "取消",
    //         type: "warning",
    //     })
    //         .then(async () => {
    //             let res = await reqAnalysisRegionDel(row.regionCode);
    //             if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
    //             this.$modal.notifySuccess("删除行政单位成功");
    //             this.Region();
    //             this.loadChildren2(row.parentCode);
    //         })
    //         .catch(() => { });
    // },

    // 重新渲染表格
    loadChildren2(parentCode) {
      reqRegionLevel(parentCode).then((res) => {
        this.$set(
          this.$refs.refreshTable.store.states.lazyTreeNodeMap,
          parentCode,
          res.data.rows
        );
      });
    },

    // 获取列表
    async Region() {
      let res = await reqBaiYunRegionPage({
        regionLevel: 1,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { list } = res.data;
      this.tableData = handleTree(
        list,
        "regionCode",
        "regionLevel",
        "ruralCode"
      );
      this.tableData.forEach((item, index) => {
        if (item.regionLevel == 1) {
          item.hasChildren = true;
        }
      });
    },
  },
  created() {
    this.Region();
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

.common-container .content {
  height: 100%;
}
</style>
